<template>
	<view class="page must_know" v-if="ScenicList.scenicName">
		<customNavBar1 :title="titleHeader"></customNavBar1>
		<u-swiper :list="list" v-if="list&&list.length>0" @change="e => currentNum = e.current" :autoplay="true" :circular="true"
			indicatorStyle="right: 20px;bottom:40px" height='750rpx' style="margin-bottom: 30rpx;">
			<view slot="indicator" class="indicator-num">
				<text class="currentNum">{{ currentNum + 1 }}/{{ list.length }}</text>
			</view>
		</u-swiper>
		<view class="basicInfo">
			<view class="name">{{ ScenicList.scenicName }}
			</view>
			<view class="remark">
				<text v-for="(item, index) in remarks" :key="index">{{
					item
				}}</text>
			</view>
			<view class="time">
				<text class="t">开放时间：</text>
				<text class="val">
					{{ ScenicList.openDate }}
					<template v-if="ScenicList.stopSellDate">
						({{ ScenicList.stopSellDate }}停止入园)
					</template>
				</text>
			</view>
			<view class="one-input">
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="9">
						<view class="demo-layout bg-purple-light">
							<view class="one2">
								{{ islandName }}
							</view>
							<view class="two2">
								{{ ScenicList.address }}
							</view>
						</view>
					</u-col>
					<u-col span="3" @click="goLocation(ScenicList)">
						<view class="demo-layout bg-purple">
							<view class="one1">
								<image src="https://i.ringzle.com/file/20240129/4496f5e1754649ed8a78a2ca9de26e4c.png"
									mode="aspectFit">
								</image>
							</view>
							<view class="two1" @click="goLocation(ScenicList)">
								<text> 地图/周边 ></text>
							</view>
						</view>
					</u-col>
				</u-row>
			</view>
			<view class="time" v-if="ScenicList.isBuy == 0 && ScenicList.startPrice != 0"
				style="margin-top: 40rpx; margin-bottom: 0;">
				<text class="t">购票方式：</text>
				<text class="val">
					线下购票
				</text>
			</view>
		</view>
		<!-- 门票预订 -->
		<view class="ticketBooking"
			v-if="ScenicList.isBuy == 1 && ScenicList.isScenicTicketDTOList && ScenicList.isScenicTicketDTOList.length != 0">
			<view class="txtCell">
				<view class="left">
					门票预订
				</view>
			</view>
			<view class="txtCell" v-for="(item, index) in ScenicList.isScenicTicketDTOList " :key="index">
				<view class="left">
					<view class="name">{{ item.ticketName }}</view>
					<view class="mark">
						<text>提前购票快速入园</text>
						<text style="color: #88919D;">|</text>
						<text style="color: #88919D;">无需换票</text>
					</view>
					<view class="price">￥<text>{{ item.realPrice }}</text></view>
				</view>
				<view class="right">
					<img class="icon" :src="jjimg" @click="jj(index)">
					<text class="number">{{ item.num }}</text>
					<img class="icon" :src="addimg" @click="add(index)">
				</view>
			</view>

		</view>
		<!-- 日期 -->
		<view class="book"
			v-if="ScenicList.isBuy == 1 && ScenicList.isScenicTicketDTOList && ScenicList.isScenicTicketDTOList.length != 0">
			<view class="tit"><text>选择出游日期</text></view>
			<view class="date">
				<view :class="['item', index == currentDate ? 'itemSelected' : '']" v-for="(item, index) in dateArr"
					:key="index" @click="handleDate(item, index)">
					<text>{{ weeks[item.week] }}</text>
					<text>{{ item.time }}</text>
				</view>
				<view class="item" @click='timeShow = true'>
					<text>更多</text><text>日期</text>
					<u-icon name="arrow-right" color="#007A69" size="24"
						customStyle="position: absolute;top: 41%;right: 6px;z-index: 1;"></u-icon>
				</view>
			</view>
		</view>
		<!-- 用户须知 -->
		<must-know :info="ScenicList" :type="type"></must-know>
		<view class="bottomBtn" v-if="totalNumber != 0">
			<view class="price">
				￥<text>{{ totalPrice }}</text>
			</view>
			<view class="btn" @click="btn()">确认（{{ totalNumber }})</view>
		</view>
		<u-calendar class="u-time" :show="timeShow" mode="single" @confirm="confirm" rowHeight="104" title="请选择日期"
			@close="timeShow = false"></u-calendar>
		<GetPhoneNumber ref="phoneNumber" @loginSuccess="loginSuccess"></GetPhoneNumber>
	</view>
</template>

<script>
	import GetPhoneNumber from '@/compoments/Getphonenumber/index.vue'
	import customNavBar1 from '@/compoments/uNavBar1'
	import mustKnow from "./mustKnow"
	export default {
		components: {
			GetPhoneNumber,
			customNavBar1,
			mustKnow
		},
		data() {
			return {
				titleHeader: '景区门票',
				currentNum: null,
				list: ['https://fsy.shengsi.gov.cn/file/20240730/9bc1732eadc94cbc8a562ae62997f79b.png'],
				tickets: [1, 2, 3],
				fyInd: 0,
				id: 0,
				type: null,
				islandName: '',
				remarks: [],
				ScenicList: {
					scenicName: '',
					openDate: '',
					address: '',
					spotAddress: ''
				},
				weeks: ['周日', '周一 ', '周二', '周三', '周四', '周五', '周六'],
				currentDate: 0,
				currentTime: null,
				timeShow: false,
				currentYear: '',
				checkTime: '',
				dateArr: [],
				totalNumber: 0,
				totalPrice: 0,
				jjimg: 'https://i.ringzle.com/file/20240221/afd0ee65707f4971833beb1b4a044a1b.png',
				addimg: 'https://i.ringzle.com/file/20240221/600c14b1ce0745039c63bdfed9cec320.png',
			}
		},
		onLoad(option) {
			const price_old = uni.getStorageSync('price_old')
			const spid_old = uni.getStorageSync('spid_old')
			const isBuy = uni.getStorageSync('jdIsBuy')
			this.islandName = option.islandName;
			this.currentTime = this.getDay(0);
			
			this.getTime();
			console.log(spid_old)
			//旅游定制页面跳转来的
			if (spid_old) {
				let price = parseFloat(price_old);
				if (price == 0 || (isBuy == 0 && price > 0)) {
					// 线下购票
					this.getFreeScenicList(spid_old) // selectOneFreeScenic
					return
				} else if (price > 0 || isBuy == 1) {
					this.getScenicList(spid_old)
					return
				}
			} else {
				//景区列表跳转过来的
				this.id = option.spid
				// || 或运算符   && 且运算符
				if (option.price == 0 || (option.isBuy == 0 && option.price > 0)) {
					// 线下购票
					console.log(option.spid)
					this.getFreeScenicList(option.spid) // selectOneFreeScenic
					return
				} else if (option.price > 0 || option.isBuy == 1) {
					// const spid = uni.getStorageSync('spid')
					// console.log(spid)
					this.getScenicList(option.spid)
					return
				}
			}
		},
		watch: {
			"ScenicList.isScenicTicketDTOList": {
				deep: true,
				handler(newV) {
					let num = 0;
					let total = 0;
					this.ScenicList.isScenicTicketDTOList.forEach((d, i) => {
						num += this.ScenicList.isScenicTicketDTOList[i].num;
						total += (this.ScenicList.isScenicTicketDTOList[i].realPrice * this.ScenicList
							.isScenicTicketDTOList[i].num);
					})
					this.totalPrice = total;
					this.totalNumber = num;
				}
			},
			checkTime(newval,oldval){
				if(newval!=oldval){
					let isScenicTicketDTOList=this.ScenicList.isScenicTicketDTOList;
					isScenicTicketDTOList.forEach((ele,index)=>{
						if(ele.calendarList){
							let calendarList=ele.calendarList;
							calendarList.forEach((ele2,index2)=>{
								if(this.isDateInRange(newval,ele2.startDate,ele2.endDate)){
									//在日期内就取这个日期的价格
									isScenicTicketDTOList[index].realPrice=ele2.price;
								}
							})
						}else{
							isScenicTicketDTOList[index].realPrice=null;
						}
					})
					this.ScenicList.isScenicTicketDTOList=this.ScenicList.isScenicTicketDTOList.filter((item)=>item.realPrice)
				}
			}
			
		},
		methods: {
			//判断一个日期是否在某个日期区间内
			isDateInRange(dateToCheck, startDate, endDate) {
			    const date1 = new Date(dateToCheck);
			    const date2 = new Date(startDate);
			    const date3 = new Date(endDate);
			 
			    return date1 >= date2 && date1 <= date3;
			},
			getFreeScenicList(e) {
				this.$api.get(`/scenic/isscenicspot/selectOneFreeScenic/${e}`)
					.then(res => {
						this.ScenicList = res.data.data;
						if (this.ScenicList.isScenicTicketPicDTOList) {
							let temp = []
							this.ScenicList.isScenicTicketPicDTOList.filter((item) => {
								temp.push(item.scenicPic)
							})
							this.list = temp;
						}
						if (this.ScenicList.isScenicTicketDTOList.length != 0) {
							this.ScenicList.isScenicTicketDTOList.forEach((d, i) => {
								this.$set(this.ScenicList.isScenicTicketDTOList[i], 'num', 0);
							})
						}
						this.remarks = res.data.data.remark.split('，');
						if (this.ScenicList.isScenicTicketDTOList.length != 0) {
							this.type = 1
						} else {
							this.type = 0
						}
					})
			},
			//导航
			goLocation(option) {
				let mapdata = {
					latitude: parseFloat(option.lat),
					longitude: parseFloat(option.lon),
					name: option.scenicName,
				}
				uni.openLocation(mapdata);
			},
			getScenicList(e) {
				this.$api.get(`/scenic/isscenicspot/selectOneScenic/${e}`)
					.then(res => {
						this.ScenicList = res.data.data;
						this.checkTime = new Date().getFullYear()+'-'+this.getDay(0).time; //默认当天日期
						if (this.ScenicList.isScenicTicketPicDTOList) {
							let temp = [];
							this.ScenicList.isScenicTicketPicDTOList.filter((item) => {
								temp.push(item.scenicPic)
							})
							this.list = temp;
						}
						if (this.ScenicList.isScenicTicketDTOList.length != 0) {
							this.ScenicList.isScenicTicketDTOList.forEach((d, i) => {
								this.$set(this.ScenicList.isScenicTicketDTOList[i], 'num', 0);
							})
						}
						this.remarks = res.data.data.remark.split('，');
						if (this.ScenicList.isScenicTicketDTOList.length != 0) {
							this.type = 1
						} else {
							this.type = 0
						}
					})
			},
			// 日期
			//选择更多日期
			handleDate(item, index) {
				this.currentDate = index;
				this.checkTime =new Date().getFullYear()+'-'+item.time;
				this.currentTime = item;
			},
			//单程确认选择日期
			confirm(e) {
				this.checkTime = e[0];
				this.currentDate = 0;
				this.timeShow = false;
				this.getTime(this.checkTime);
				this.currentTime = this.getDay(0, e[0])
			},
			getTime(currentDate) {
				let dateArr = [];
				for (let i = 0; i < 4; i++) {
					let date = this.getDay(i, currentDate);
					dateArr.push(date);
				}
				this.dateArr = dateArr;
			},
			getDay(day, currentDate) {
				if (currentDate) {
					var today = new Date(currentDate);
				} else {
					var today = new Date();
				}
				var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;

				today.setTime(targetday_milliseconds); //注意，这行是关键代码

				var tYear = today.getFullYear();
				this.currentYear = tYear;
				var tMonth = today.getMonth();
				var tDate = today.getDate();
				var week = today.getDay();
				tMonth = this.doHandleMonth(tMonth + 1);
				tDate = this.doHandleMonth(tDate);
				let json = {
					time: tMonth + "-" + tDate,
					week: week,
					price: this.list.realPrice || 0.01,
				}
				return json
			},
			doHandleMonth(month) {
				var m = month
				if (month.toString().length == 1) {
					m = "0" + month;
				}
				return m;
			},
			add(i) {
				this.ScenicList.isScenicTicketDTOList[i].num++;
			},
			jj(i) {
				if (this.ScenicList.isScenicTicketDTOList[i].num > 0) {
					this.ScenicList.isScenicTicketDTOList[i].num--;
				}

			},
			btn() {
				if(this.checkTime==new Date().Format('yyyy-MM-dd')){
					let hou=new Date().getTime();
					let d=this.checkTime+' '+this.ScenicList.stopSellDate+':00'
					let shour=new Date(d).getTime();
					if(hou>shour){
					return uni.showToast({
							title: `该景点${this.ScenicList.stopSellDate}已停售当天门票,请选择后面的游玩日期!`,
							icon: 'none',
							duration: 4000
						})
					}
				}
				const isScenicTicketDTOList = encodeURIComponent(JSON.stringify(this.ScenicList.isScenicTicketDTOList
					.filter((item) => item.num > 0)))
				this.$login().then(res => {
					if (res !== 0) {
						this.$refs['phoneNumber'].show = true;
					}
				})
				if (uni.getStorageSync('access_token')) {
					uni.navigateTo({
						url: '/pagesTrip/scenicSpots/orderWrite?&scenicId=' + this.ScenicList.spid +
							'&scenicName=' +
							this.ScenicList.scenicName + '&isScenicTicketDTOList=' +
							isScenicTicketDTOList + '&checkTime=' + this.checkTime + '&totalNumber=' + this
							.totalNumber + '&totalPrice=' + this.totalPrice
					})
				}



			}

		}
	}
</script>

<style lang="scss" scoped>
	// .page1{
	// }
	* {
		padding: 0;
		margin: 0;

	}

	/deep/.u-time .u-button {
		width: 100% !important;
	}

	/deep/.u-cell__body.data-v-1c4434ae {
		padding: 0;
	}

	/deep/.u-calendar-header__title {
		color: #111 !important;
		height: auto !important;
		padding: 32rpx 0 40rpx;
		line-height: 45rpx !important;
	}

	/deep/.u-calendar-header {
		margin-bottom: 80rpx;
		padding: 0 !important;
		position: relative;
	}

	/deep/.u-calendar-header__subtitle {
		position: absolute;
		height: auto !important;
		bottom: -80rpx;
		width: 100%;
		padding: 18rpx 40rpx;
		text-align: left !important;
		box-sizing: border-box;
		line-height: 25px !important;
		background: #F4F5F5;
		color: #111 !important;
		font-size: 32rpx !important;
	}

	/deep/.u-calendar__confirm {
		margin-top: 50px;
		margin-bottom: 20rpx;

		.u-button {
			width: 100% !important;
			height: 88rpx !important;
			font-size: 32rpx !important;
			letter-spacing: 2px;
		}
	}

	/deep/.u-calendar-header__weekdays {
		margin-bottom: 16rpx;

		.u-calendar-header__weekdays__weekday {
			font-size: 28rpx !important;
			line-height: 40px !important;
			color: #111 !important;
		}
	}

	page,
	.page {
		background-color: #F5F8FA;
		//overflow: hidden;
		// margin-top: 128rpx;
		//padding-top: 130rpx;
	}

	.currentNum {
		padding: 4rpx 16rpx;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 16rpx;
		width: fit-content;
		@include flex;
		justify-content: center;
		color: #FFFFFF;
	}

	.operation {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		background-color: #fff;
		height: 112rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 10;
		box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.06);

		.left {
			color: #FF4141;
			font-size: 24rpx;

			text:nth-child(1) {
				color: #666;
				margin-right: 16rpx;
			}

			text:nth-child(2) {
				font-size: 48rpx;
			}
		}

		.right {
			display: flex;
			min-width: 200rpx;
			margin-right: 50rpx;

			text {
				width: 220rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				color: #fff;
				border-radius: 40rpx;
				margin-left: 24rpx;
				font-size: 32rpx;
				background-image: #007A69;
			}
		}

	}

	.around {
		padding: 68rpx 24rpx 85rpx;

		.title {
			font-size: 36rpx;
			color: #333;
			margin-bottom: 40rpx;
		}

		.classfy {
			padding-right: 10%;
			margin-bottom: 30rpx;
			display: grid;
			gap: 0 24rpx;
			grid-template-columns: auto auto auto;

			text {
				width: 188rpx;
				height: 64rpx;
				line-height: 64rpx;
				border-radius: 16rpx;
				text-align: center;
				border: 1rpx solid #CCCCCC;

				&.on {
					background-image: linear-gradient(to right, #0EBFFE, #00D3E8);
					color: #fff;
				}
			}
		}
	}

	.ticketBooking {
		padding: 0 24rpx;
		background-color: #fff;

		.left {
			font-size: 36rpx;
			color: #333;
			font-weight: bold;
		}


		.txtCell {
			padding: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #EFEFEF;

			&:nth-child(1) {
				border-bottom: 0;
			}

			.left {
				margin-left: -24rpx;


				.name {
					color: #333;
					font-size: 32rpx;
					font-weight: bold;

				}

				.mark {
					margin: 20rpx 0;
					height: 32rpx;
					line-height: 24rpx;

					text {
						display: inline-block;
						font-size: 24rpx;
						color: #3C998C;
						border-radius: 4rpx;
						margin-right: 10rpx;
						font-weight: normal;
					}
				}

				// .des {
				// 	color: #AAAAAA;
				// 	font-size: 24rpx;
				// 	font-weight: normal;
				// }
				.price {
					font-size: 30rpx;
					color: #FF4141;

					text {
						font-size: 40rpx;
						margin-left: 2rpx;
					}
				}
			}

			.right {
				margin-right: -24rpx;

				.icon {
					width: 44rpx;
					height: 44rpx;
					vertical-align: middle;
				}

				.number {
					font-size: 36rpx;
					vertical-align: middle;
					margin: 0 30rpx;
				}

				// .btn {
				// 	text {
				// 		display: inline-block;
				// 		width: 132rpx;
				// 		height: 60rpx;
				// 		// background-image: linear-gradient(to right, #FF7D43, #FEAC2C);
				// 		background: linear-gradient(to right, #FF7D43, #FEAC2C);
				// 		font-size: 26rpx;
				// 		color: #fff;
				// 		border-radius: 30rpx;
				// 		text-align: center;
				// 		line-height: 60rpx;
				// 	}
				// }
			}
		}
	}



	.basicInfo {
		padding: 48rpx 24rpx;
		border-radius: 24rpx 24rpx 0 0;
		background-color: #fff;
		position: relative;
		z-index: 2;
		transform: translate(0, -20rpx);

		.weather {

			position: absolute;
			right: 0;
			top: 36rpx;
			padding: 0 24rpx 0 30rpx;
			z-index: 1;
			border-left: 1rpx solid #EFEFEF;
			text-align: center;

			image {
				width: 48rpx;
				height: 37rpx;
			}

			view {
				color: #808080;
				font-size: 20rpx;
				margin-top: 8rpx;
			}
		}

		.name {
			font-size: 36rpx;
			font-weight: bold;
			color: #111111;
			position: relative;
		}

		.remark {
			margin: 26rpx 0 32rpx;

			text {
				display: inline-block;
				color: #C9A771;
				font-size: 22rpx;
				padding: 8rpx 11rpx;
				border: 1rpx solid #C9A771;
				margin-right: 18rpx;
				border-radius: 4rpx;

			}
		}

		.time {
			position: relative;
			margin-bottom: 20rpx;


		}

		.location {
			position: absolute;
			right: 0;
			top: 2px;
			z-index: 1;
		}

		.price {
			font-size: 28rpx;
			color: #FF3E3E;
			font-weight: bold;

			text {
				font-size: 40rpx;
				margin-left: 2rpx;
			}
		}

		.val {
			width: 225px;
			display: inline-block;
		}


	}

	.bottomBtn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 140rpx;
		background: #fff;
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: start;
		padding: 0 20rpx 0 30rpx;
		box-shadow: 4rpx 0 8rpx rgba(0, 0, 0, 0.04);
		justify-content: space-between;
		box-sizing: border-box;

		.price {
			font-size: 28rpx;
			color: #FF3E3E;

			text {
				font-size: 40rpx;
				margin-left: 2rpx;
			}
		}

		.btn {
			width: 248rpx;
			height: 88rpx;
			line-height: 88rpx;
			border-radius: 44rpx;
			color: #fff;
			font-weight: bold;
			font-size: 32rpx;
			background-color: #007A69;
			text-align: center;
		}
	}

	.book {
		background-color: #fff;
		margin: 0 0 20rpx 0;
		padding: 40rpx 24rpx 2rpx;
		border-radius: 16rpx;

		.tit {
			margin-bottom: 36rpx;

			text {
				&:nth-child(1) {
					font-size: 36rpx;
					color: #111;
					font-weight: bold;
					font-family: PingFang-SC-Bold, PingFang-SC;
				}

				&:nth-child(2) {
					font-size: 24rpx;
					margin-left: 20rpx;
					color: #999;
				}
			}


		}

		.date {
			display: grid;
			grid-template-columns: auto auto auto auto auto;
			gap: 20rpx;
			margin-bottom: 40rpx;

			.item {
				border: 1rpx solid #EFEFEF;
				font-size: 24rpx;
				text-align: center;
				border-radius: 12rpx;
				height: 140rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				position: relative;

				text {
					display: block;
					color: #333;

					&:nth-child(2) {
						margin: 8rpx 0;
					}

					&:nth-child(3) {
						color: #007A69;
						font-weight: bold;
					}
				}

				&:last-child {
					padding-right: 20rpx;

					text {
						color: #007A69;

					}

				}
			}

			.itemSelected {
				background: #F0F8F6;
				border: 1rpx solid #007A69;

				text {
					display: block;
					color: #007A69;

					&:nth-child(2) {
						margin: 8rpx 0;
						color: #007A69;
					}

					&:nth-child(3) {
						color: #007A69;
					}
				}

				&:last-child {
					padding-top: 40rpx;
					color: #FFFFFF;
				}
			}
		}
	}

	.one-input {
		box-sizing: border-box;
		width: 100%;
		height: 128rpx;
		background: #F0F8F6;
		border-radius: 16rpx;
		padding-left: 20rpx;

		.bg-purple-light {

			// display: flex;
			.one2 {
				// height: 36rpx !important;
				font-size: 26rpx;
				color: #000000;
				margin-bottom: 12rpx;
				font-weight: bold;
			}

			.two2 {
				font-size: 24rpx;
				color: #666666;
				font-weight: Regular;
			}
		}

		.bg-purple {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			font-size: 24rpx;
			color: #808080;
			background-image: url('https://i.ringzle.com/file/20240129/dcf2338517e344c697ef7cd853ce2234.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: 128rpx;
			padding-right: 10rpx;


			.one1 {
				padding-top: 24rpx;
				width: 34rpx;
				height: 46rpx;

				image {
					width: 100%;
					height: 100%;
					margin-bottom: 4rpx;
					// width: 46rpx;
					// height: 46rpx;
				}

			}

			.two1 {
				font-size: 22rpx;
				color: #007A69;
			}
		}
	}
</style>